<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .txt
        {
            background-color: yellow;
            width: 200px;
            /*以下三句一起使用的 不会用 或不知道的情况查 mdn*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .overflow
        {
            background-color: lightcoral;
            width: 200px;
            height: 2500px;
            /*默认的  可见*/
            overflow: visible;
            /*设置为不可见*/
            overflow: hidden;
            /*无论是否超出 都会有拖动条*/
            overflow: scroll;
            /*超出的有拖动条 不超出的没有*/
            overflow: auto;
        }

    </style>
</head>
<body>
  <div class="txt" title="阿斯顿法国红酒看来，。；、">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda aut enim est itaque non numquam odit quod temporibus veniam. A atque distinctio eos magnam optio perferendis quam quo vitae!
  </div>

    <div class="overflow">
        <img src="../2.png" alt="">
        <img src="../2.png" alt="">
        <img src="../2.png" alt="">
        <img src="../2.png" alt="">
        <img src="../2.png" alt="">
    </div>
</body>
</html>